<template>
    <div class="page animate__animated animate__fadeIn">
        <!-- <el-card :bordered="false" shadow="never" class="ivu-mt" :body-style="{ padding: '20px 20px 0' }">
            <el-form size="small" inline label-position="right">
                <el-form-item label="公司">
                    <el-input placeholder="请输入公司名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card> -->
        <el-card :bordered="false" shadow="never" class="ivu-mt" :body-style="{ padding: '20px 20px' }" v-loading="isLoading">
            <el-row :gutter="10" v-if="list.length > 0">
                <!-- <el-col :xs="12" :sm="6" :md="6" :lg="4" :xl="4">
                    <el-card :body-style="{ padding: '0px' }">
                        <div class="contract-up-wrap">
                            <div class="upload">
                                <el-upload class="upload-file" :action="uploadUrl" :headers="headers" :data="fileData"
                                    name="iFile" :auto-upload="true" :show-file-list="false" :accept="accept"
                                    :on-progress="handleProgress" :on-success="handleSuccess">
                                    <i class="el-icon-document-checked success-icon" v-if="isSucees"></i>
                                    <i class="el-icon-document-add upload-icon" v-else></i>
                                </el-upload>
                                <el-progress :percentage="precent" :stroke-width="4" :show-text="false" class="progress"
                                    v-if="showProgress"></el-progress>
                            </div>
                            <div class="toolTip">支持上传DOC/DOCX/PDF/TXT文件</div>
                        </div>
                    </el-card>
                </el-col> -->
                <el-col :xs="12" :sm="6" :md="6" :lg="4" :xl="4" v-for="(item, index) in list" :key="index">
                    <el-card :body-style="{ padding: '0px' }">
                        <div class="contract-wrap">
                            <h2>{{ item.file_name }}</h2>
                            <ul>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                            <p>{{ item.create_time }}</p>
                            <div class="handle-btn">
                                <el-button type="success" icon="el-icon-download" circle size="small" @click="download(item)"></el-button>
                                <!-- <el-button type="danger" icon="el-icon-delete" circle size="small"
                                    @click="delContract(item.contract_id)"></el-button> -->
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <div class="empty" v-else>
                <el-empty description="暂无数据" />
            </div>
            <pagination v-if="total" :total="total" :page.sync="page" :limit.sync="limits" @pagination="getList" />
        </el-card>
        <!-- <add-contract ref="contract"></add-contract> -->
    </div>
</template>
<script>
// import addContract from '../components/addContract.vue';
import hostUrl from "@/utils/baseUrl.js";
import { downloadFile } from '../../utils/util';
import { comContractList } from "@/api/contract.js";
export default {
    // components: { addContract },
    data() {
        return {
            uploadUrl: hostUrl + "/uploadFile",
            headers: {
                Authorization: localStorage.getItem("Supply-Access-Token")
                    ? localStorage.getItem("Supply-Access-Token")
                    : "",
            },
            fileData: {
                type: 20,
            },
            accept: '.DOC, .DOCX, .TXT, .PDF',
            showProgress: false,
            precent: 0,
            title: '',
            ruleForm: {
                file_path: '',
                file_name: '',
                supply_id: '',
                company_id: ''
            },
            list: [],
            total: 0,
            page: 1,
            limits: 15,
            isLoading: false,
            isSucees: false,
        }
    },
    created() {
        this.isLoading = true;
        this.getList();
    },
    methods: {
        //获取列表
        getList() {
            comContractList({
                page: this.page,
                limits: this.limits,
            }).then(res => {
                this.isLoading = false;
                if (res.code == 0) {
                    this.list = res.data.data;
                    this.total = res.data.total;
                }
            })
        },
        handleProgress(event) {
            this.showProgress = true;
            this.precent = Math.round((event.loaded / event.total) * 100);
        },
        handleSuccess(res) {
            if (res.code == 0) {
                this.$nextTick(() => {
                    this.ruleForm.file_path = res.file_url;
                    this.ruleForm.file_name = res.file_name;
                    this.isSucees = true;
                    this.submitFile()
                })
            } else {
                this.$message.error(res.msg);
                this.showProgress = false;
                this.precent = 0;
            }
        },
        //获取供应商详情
        getSupplyDetail() {
            detailSupply({
                supply_id: this.ruleForm.supply_id
            }).then(res => {
                if (res.code == 0) {
                    this.title = res.data.name;
                    this.ruleForm.company_id = res.data.company_id;
                }
            })
        },
        submitFile() {
            uploadContract(this.ruleForm).then(res => {
                if (res.code == 0) {
                    this.$message.success(res.msg);
                    this.getList();
                    this.showProgress = false;
                    this.precent = 0;
                    setTimeout(() => {
                        this.isSucees = false;
                    }, 1000)
                }
            })
        },
        download(item) {
            window.location.href = `${hostUrl}/downComContract?contract_id=${item.contract_id}`;
        },
        delContract(id) {
            this.$confirm("您确定要删除该合同吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                deleteContract({
                    contract_id: id,
                }).then((res) => {
                    if (res.code == 0) {
                        this.$message({
                            message: res.msg,
                            type: "success",
                        });
                        this.getList();
                    }
                });
            }).catch(() => { });
        },
        goBack() {
            this.$router.go(-1);
        },
    }
}
</script>
<style scoped>
.contract-wrap {
    height: 300px;
    margin: 0 20px;
    padding: 20px 0;
    box-sizing: border-box;
    position: relative;
}

.contract-wrap p {
    text-align: right;
}

.el-col {
    margin-bottom: 10px;
}

.contract-up-wrap {
    height: 300px;
    margin: 0 12px;
    padding: 20px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.contract-up-wrap .upload {
    width: 100%;
    height: 120px;
    position: relative;
}

.upload-file {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contract-up-wrap .progress {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}

.contract-up-wrap .upload-icon {
    font-size: 80px;
    text-align: center;
    color: #ccc;
}
.success-icon {
    font-size: 80px;
    text-align: center;
    color: #67c23a;
}

.contract-up-wrap .toolTip {
    text-align: center;
    padding-top: 10px;
}

.contract-wrap h2 {
    width: 100%;
    color: #19181a;
    /* padding:0 20px; */
    font-size: 16px;
    box-sizing: border-box;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 10px;
}

.contract-wrap ul {
    margin-top: 40px;
}

.contract-wrap ul li {
    width: 100%;
    height: 10px;
    background: #f0f2f5;
    margin-bottom: 10px;
    border-radius: 6px;
}

.contract-wrap ul li:first-of-type {
    width: 30%;
    height: 10px;
    background: #f0f2f5;
    margin-bottom: 10px;
    border-radius: 6px;
}

.contract-wrap ul li:nth-of-type(2) {
    width: 90%;
}

.contract-wrap .contract-icon {
    width: 100px;
    height: 100px;
    margin: 20px auto;
}

.contract-wrap .contract-icon img {
    width: 100%;
    height: 100%;
}

.handle-btn {
    display: flex;
    justify-content: flex-end;
    position: absolute;
    right: 0;
    bottom: 20px;
}

.submit-btn {
    margin: auto;
}
</style>